<template>
  <div class="flashProductRelation">
    <div class="dataList">
      <div>
        <el-icon size="16">
          <List />
        </el-icon>
        数据列表
      </div>
      <div>
        <el-button @click="addFn">添加</el-button>
      </div>
    </div>
    <el-table :data="flashProductRelationList" border style="width: 100%">
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="product.name" label="商品名称" />
      <el-table-column label="货号">
        <template #default="{ row }">
          {{ "NO. " + row.flashPromotionSessionId }}
        </template>
      </el-table-column>
      <el-table-column label="商品价格">
        <template #default="{ row }">
          {{ "¥ " + row.product.price }}
        </template>
      </el-table-column>
      <el-table-column prop="product.stock" label="剩余数量" />
      <el-table-column label="秒杀价格">
        <template #default="{ row }">
          {{ row.flashPromotionPrice ? "¥ " + row.flashPromotionPrice : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="flashPromotionCount" label="秒杀数量" />
      <el-table-column prop="flashPromotionLimit" label="限购数量" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column label="操作" width="200%">
        <template #default="{ row }">
          <el-button type="primary" text @click="editFn(row)">编辑</el-button>
          <el-button
            type="primary"
            text
            @click="deleteFlashProductRelationFn(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        v-model:current-page="getListParams.pageNum"
        v-model:page-size="getListParams.pageSize"
        :page-sizes="[5, 10, 15]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </div>

    <FlashGoodsList
      @hide="hideDialog"
      :show="showDialog"
      @getList="getList"
    />
    <EditFlashGoodsInfo
      :show="showEditDialog"
      @hide="hideEditModalFn"
      @getList="getList"
      :id="EditId"
      :data="(FlashGoodsInfo as IFlashProductRelationList)"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import useTable from "@/hooks/useTable";
import {
  getFlashProductRelationListApi,
  deleteFlashProductRelationApi,
} from "./api";
import { useRoute } from "vue-router";
import { List } from "@element-plus/icons-vue";
import FlashGoodsList from "./components/FlashEditList.vue";
import { log } from "console";
import { ElMessage, ElMessageBox } from "element-plus";
import EditFlashGoodsInfo from "./components/EditFlashGoodsInfo.vue";
const route = useRoute();

const getListParams = reactive({
  flashPromotionSessionId: 0,
  flashPromotionId: 0,
  pageSize: 5,
  pageNum: 1,
});

const showDialog = ref<boolean>(false);
// 是否显示编辑模态框
const showEditDialog = ref<boolean>(false);

const hideDialog = () => {
  showDialog.value = false;
};

const hideEditModalFn = () => {
  showEditDialog.value = false;
};

const total = ref<number>();

const flashProductRelationList = ref<IFlashProductRelationList[]>([]);

getListParams.flashPromotionId = parseInt(
  route.query.flashPromotionId as string
);
getListParams.flashPromotionSessionId = parseInt(
  route.query.flashPromotionSessionId as string
);
const getList = () => {
  getFlashProductRelationListApi(getListParams).then((res) => {
    if (res.code === 200) {
      flashProductRelationList.value = res.data.list;
      total.value = res.data.total;
      getListParams.pageNum = res.data.pageNum;
      getListParams.pageSize = res.data.pageSize;
    }
  });
};
getList();

const addFn = () => {
  showDialog.value = true;
};

// 删除
const deleteFlashProductRelationFn = (id: number) => {
  ElMessageBox.confirm("是否确认删除", "提示", {
    cancelButtonText: "取消",
    confirmButtonText: "确认",
    type: "warning",
  }).then(() => {
    deleteFlashProductRelationApi(id).then((res) => {
      if (res.code === 200) {
        ElMessage.success("删除成功");
        // 更新列表
        getList();
      }
    });
  });
};

// 编辑
const FlashGoodsInfo = ref<IFlashProductRelationList>();
const EditId = ref<number>(0);
const editFn = (row: IFlashProductRelationList) => {
  EditId.value = row.id;
  showEditDialog.value = true;
  FlashGoodsInfo.value = row as IFlashProductRelationList;
};
</script>

<style scoped lang="less">
.flashProductRelation {
  .dataList {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    align-items: center;
    margin-bottom: 20px;
  }

  :deep(.cell) {
    text-align: center;
  }

  .page {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
  }
}
</style>
